<template>
  <div>
    <span class="sq ys">申请</span>
    <span class="xz ys">选择</span>
    <span class="oa ys">oa</span>
    <span class="rwfp ys">任务分配</span>
    <span class="ypjsqr ys">样品接收确认</span>
    <span class="syjh ys">试验计划</span>
    <span class="lck ys">流程卡</span>
    <span class="bg ys">报告</span>
    <!-- 组件 -->
    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

<script>
import Vue from "vue";
import VueTour from "vue-tour";
require("vue-tour/dist/vue-tour.css");
Vue.use(VueTour);
export default {
  data() {
    return {
      // VueTour步骤
      steps: [
        {
          target: ".sq", // We're using document.querySelector() under the hood
          header: {
            title: "Get Started",
          },
          content: ` <strong>申请</strong>!`,
        },
        {
          target: ".xz", // We're using document.querySelector() under the hood
          header: {
            title: "step2",
          },
          content: ` <strong>选择</strong>!`,
        },
        {
          target: ".oa", // We're using document.querySelector() under the hood
          header: {
            title: "step3",
          },
          content: ` <strong>oa审批</strong>!`,
        },
        {
          target: ".rwfp", // We're using document.querySelector() under the hood
          header: {
            title: "step4",
          },
          content: ` <strong>任务分配</strong>!`,
        },
        {
          target: ".ypjsqr", // We're using document.querySelector() under the hood
          header: {
            title: "step5",
          },
          content: ` <strong>样品接收确认</strong>!`,
        },
        {
          target: ".syjh", // We're using document.querySelector() under the hood
          header: {
            title: "step6",
          },
          content: ` <strong>试验计划</strong>!`,
        },
        {
          target: ".lck", // We're using document.querySelector() under the hood
          header: {
            title: "step7",
          },
          content: ` <strong>流程卡</strong>!`,
        },
        {
          target: ".bg", // We're using document.querySelector() under the hood
          header: {
            title: "step8",
          },
          content: ` <strong>报告</strong>!`,
        },
      ],
    };
  },
  mounted() {
    this.$tours["myTour"].start();
  },
  created() {},
  methods: {},
};
</script>

<style scoped>
.ys {
  border: 1px solid #ccc;
  padding: 3px;
  text-align: center;
  margin-right: 3px;
}
</style>